<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <i class="el-icon-menu"></i>
            &nbsp;
            <span>服务菜单</span>
        </div>
        <div id="menu">
            <div @click="$router.push('/ei/signup')" class="menu-item" style="background-color:#a6d048;">
                <div class="icon">
                    <i class="el-icon-document-add"></i>
                </div>
                <h3>在线报名</h3>
            </div>
            <div @click="$router.push('/ei/myExam')" class="menu-item" style="background-color:#f8ca5a;">
                <div class="icon">
                    <i class="el-icon-document"></i>
                </div>
                <h3>我的考试</h3>
            </div>
            <div class="menu-item" style="background-color:#f5ad63;">
                <div class="icon">
                    <i class="el-icon-trophy"></i>
                </div>
                <h3>成绩查询</h3>
            </div>
            <div class="menu-item" style="background-color:#8ecac2;">
                <div class="icon">
                    <i class="el-icon-medal-1"></i>
                </div>
                <h3>我的证书</h3>
            </div>
        </div>

    </el-card>

</template>

<script>
    export default {
        name: "fastMenu"
    }
</script>

<style scoped lang="scss">
    #menu {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .menu-item {
            position: relative;
            border-radius: 5px;
            cursor: pointer;
            width: 180px;
            height: 240px;
            margin: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            text-align: center;
            color: #ffffff;

            .icon {
                margin-top: 50px;

                & > i {
                    font-size: 100px;
                }
            }

            top: 0;
            transition: 0.5s;

            &:hover {
                top: -5px;
            }
        }
    }

</style>